<template>
  <div>
    <el-card>
      <h2>{{ruleForm.id !==0?'修改问题':'添加问题'}}</h2>
      <el-form :model="ruleForm" :rules="rules" ref="formBusiness">
        <h3>题目信息</h3>
        <!-- 题目 -->
        <el-form-item label="题目" label-width="120px" prop="stem">
          <el-input v-model="ruleForm.stem" placeholder="请输入题目"></el-input>
        </el-form-item>
        <!-- 选项A -->
        <el-form-item label="选项A" label-width="120px">
          <el-input v-model="choicesaa" placeholder="请输入选项A内容"></el-input>
        </el-form-item>
        <!-- 选项B -->
        <el-form-item label="选项B" label-width="120px">
          <el-input v-model="choicesww" placeholder="请输入选项B内容"></el-input>
        </el-form-item>
	<!-- 正确选项 -->
	<el-form-item label="正确选项" label-width="120px" prop="correctindex">
	  &nbsp;&nbsp;
	  <input type="radio" id="one" value="0" v-model="ruleForm.correctindex">
	  <label for="one">选项A</label>&nbsp;&nbsp;&nbsp;&nbsp;
	  <input type="radio" id="two" value="1" v-model="ruleForm.correctindex">
	  <label for="two">选项B</label>
	</el-form-item>
        <!-- 错误答案提示 -->
        <el-form-item label="错误答案提示" label-width="120px" prop="mistakehint">
          <el-input v-model="ruleForm.mistakehint" placeholder="请输入错误答案提示"></el-input>
        </el-form-item>
        <!-- 显示状态 -->				
        <el-form-item label="显示状态" label-width="120px" prop="displaying">
          &nbsp;&nbsp;
	  <input type="radio" id="two" value="true" v-model="ruleForm.displaying">
	  <label for="two">显示</label>&nbsp;&nbsp;&nbsp;&nbsp;
	  <input type="radio" id="one" value="false" v-model="ruleForm.displaying">
          <label for="one">不显示</label>
        </el-form-item>
        <h3>音频信息</h3>
	<!-- 题目真人语音 -->
	<el-form-item label="上传题目真人语音">
	  <audio controls = "controls" :src="ruleForm.stemvoiceurl"></audio>
	  <el-upload :action="actions"
	    class="upload-demo"
	    :http-request="upLoadStemvoiceurl"
	    :before-upload="beforeAvatarUpload"
	    :before-remove="beforeRemoves1"
	    :limt="1"
	    :file-list="fileList1"
	    ref="ImgRef1">
	    <el-button size="small" type="primary">点击上传</el-button>
	  </el-upload>
	</el-form-item>
	<!-- 错误提示真人语音 -->
	<el-form-item label="上传错误提示真人语音">
	   <audio controls = "controls" :src="ruleForm.mistakehintvoiceurl"></audio>
	   <el-upload :action="actions"
	     class="upload-demo"
	     :http-request="upLoadMistakehintvoiceurl"
	     :before-upload="beforeAvatarUpload"
	     :before-remove="beforeRemoves2"
	     :limt="1"
	     :file-list="fileList2"
	     ref="ImgRef2">
	     <el-button size="small" type="primary">点击上传</el-button>
	   </el-upload>
	</el-form-item>
	<h3>图片信息</h3>
	<!-- 题目图片 -->
	<el-form-item label="上传题目图片">
	  <el-upload :action="actions" list-type="picture-card" 
	    :http-request="upLoadStempictureurl"
	    :before-upload="beforeAvatarUpload"
	    :before-remove="beforeRemoves3"
	    :file-list="fileList3" 
	     :limt="1"
	     ref="ImgRef3">
	    <i class="el-icon-plus"></i>
	  </el-upload>
	  <el-dialog :visible.sync="dialogVisibleImg">
	    <img width="100%" :src="ruleForm.stempictureurl" alt />
	  </el-dialog>
	</el-form-item>
	<!-- 错误提示图片 -->
	<el-form-item label="上传错误提示图片">
	  <el-upload :action="actions" list-type="picture-card"
	      :http-request="upLoadMistakehintpictureurl"
	      :before-upload="beforeAvatarUpload"
	      :before-remove="beforeRemoves4"
	      :file-list="fileList4"
	      :limt="1"
	      ref="ImgRef4">
	      <i class="el-icon-plus"></i>
	  </el-upload>
	  <el-dialog :visible.sync="dialogVisibleImg">
	    <img width="100%" :src="ruleForm.mistakehintpictureurl" alt="">
	  </el-dialog>
	</el-form-item>
      </el-form>
      <!-- 提交 -->
      <el-button @click="subimt" class="subimt" type="primary">提交</el-button>
    </el-card>
  </div>
</template>

<script>
import {put} from "../utils/oos.js"
import { saveQuestion,getQuestionById } from "../api/index";
export default {
  data() {
    return {
      websockt:null,
      fileList1:[],
      name1:"",
      fileList2:[],
      name2:"",
      fileList3:[],
      fileList4:[],
      actions:"",
      dialogVisibleImg:false,
      dialogImageUrl:"",
      // 数据源
      ruleForm: {
        id: 0,
        sceneTypeId: 1,
        stem:"",
        choices:"",
        correctindex:"",
        mistakehint:"",
	displaying:"",
        stemvoiceurl:"",
        mistakehintvoiceurl:"",
	mistakehintpictureurl:"",
        stempictureurl:""
      },
      choicesaa:"",
      choicesww:"",
      choicett:"",
      value: true,
      rules: { 
        stem: [{ required: true, message: "请输入题目", trigger: "blur" }],
	correctindex: [{ required: true, message: "请选择正确选项", trigger: "blur" }],
        mistakehint: [{ required: true, message: "请输入错误答案提示", trigger: "blur" }],
	displaying: [{ required: true, message: "请选择显示状态", trigger: "blur" }]
      },
      //图片上传oss
      msg: 'Welcome to Your Vue.js App',
      dialogVisible:false,
      dialogImageUrl2:"",
      fileList: []  ,//上传成功的文件都放在此数组中，删除包括
      baseurl:""
    };
  },
  computed: {
    
  },
  created() {
    // 商品id获取商品信息
    let {id}=this.$route.query
    if(id)this.getShop(id)
    const url= "wss://175.24.83.159:8001/push"
    this.websockt =new WebSocket(url)
    
  },
  methods: {
    // 根据id获取商品信息  编辑
    async getShop(id){
      const res=await getQuestionById({id})
      this.ruleForm.id=res.data.question.id
      this.ruleForm.stem=res.data.question.stem
      this.ruleForm.correctindex=res.data.question.correctindex
      this.choicett=res.data.question.choices
      this.choicesaa=this.choicett.split(";")[0]
      this.choicesww=this.choicett.split(";")[1]
      this.ruleForm.mistakehint=res.data.question.mistakehint
      this.ruleForm.displaying=res.data.question.displaying
      this.ruleForm.stemvoiceurl=res.data.question.stemvoiceurl
	console.log(res.data.question.stemvoiceurl)
	if(res.data.question.stemvoiceurl !=''){
	let imgObject1= new Object()
	  imgObject1.url=res.data.question.stemvoiceurl
	  console.log(imgObject1.url.split("/")[4])
	  var path = decodeURIComponent(imgObject1.url.substring (imgObject1.url.lastIndexOf("/") + 1));
	  path = path.substring (14);
	  this.fileList1.push({name:path,url:imgObject1.url})
      }
      this.ruleForm.mistakehintvoiceurl=res.data.question.mistakehintvoiceurl  
	console.log(res.data.question.mistakehintvoiceurl)
	if(res.data.question.mistakehintvoiceurl !=''){
	let imgObject2= new Object()
          imgObject2.url=res.data.question.mistakehintvoiceurl
	  //console.log(imgObject2.url.split("/")[4])
	  var path = decodeURIComponent(imgObject2.url.substring (imgObject2.url.lastIndexOf("/") + 1));
	  path = path.substring (14);
	  this.fileList2.push({name:path,url:imgObject2.url})
	}
      this.ruleForm.mistakehintpictureurl=res.data.question.mistakehintpictureurl
       if(res.data.question.mistakehintpictureurl !=''){
       let imgObject4= new Object()
            imgObject4.url=res.data.question.mistakehintpictureurl
            this.fileList4.push(imgObject4) 
      }
      this.ruleForm.stempictureurl=res.data.question.stempictureurl       
       if(res.data.question.stempictureurl !=''){
       let imgObject3= new Object()
            imgObject3.url=res.data.question.stempictureurl
            this.fileList3.push(imgObject3)
       }
    },
    // 图片验证
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isLt2M;
    },
    // 上传题目真人语音上传
    upLoadStemvoiceurl(item){
          console.log(1)
          // 随机命名
          var fileName = item.file.name  // 当前本地上传的这张图片的名称(没有时间日期)	
	  var date = new Date()
	  var filePath = 'anfang-audio/'+new Date().getTime()+'-'+ fileName
          var file = item.file // 当前本地上传的这张图片   文件流	 
	  this.fileList1 =[]
          // oss上传
          put(filePath, file).then(result => {  // 调oss api 上传图片    	
    	     console.log(result)
	     this.name1=result.name;
    	     // 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
    	     this.fileList1.push({name:item.file.name,url:result.url})
	     this.ruleForm.stemvoiceurl=result.url;
          })    	       
    },
    beforeRemoves1(file, fileList1){
      this.ruleForm.stemvoiceurl=""
      this.$refs.ImgRef1.clearFiles()
    },
    // 上传错误提示真人语音上传
    upLoadMistakehintvoiceurl(item){
          console.log(2)
          // 随机命名
          var fileName = item.file.name  // 当前本地上传的这张图片的名称(没有时间日期)      
          var date = new Date()
	  var filePath = 'anfang-audio/'+new Date().getTime()+'-'+ fileName
	  var file = item.file // 当前本地上传的这张图片   文件流				       
          this.fileList2 =[]
	  // oss上传
          put(filePath, file).then(result => {  // 调oss api 上传图片    	
    	     console.log(result)
    	     this.name2=result.name;
	     // 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
    	     this.fileList2.push({name:item.file.name,url:result.url}) 
	     this.ruleForm.mistakehintvoiceurl=result.url;
          })    	       
    },
    beforeRemoves2(file, fileList2){
      this.ruleForm.mistakehintvoiceurl=""
      this.$refs.ImgRef2.clearFiles()
    },
    // 上传题目图片上传
    upLoadStempictureurl(item){
          console.log(3)
          // 随机命名
          var fileName = item.file.name  // 当前本地上传的这张图片的名称(没有时间日期)	      
          var date = new Date()
	  var filePath = 'anfang-picture/'+new Date().getTime()+'-'+ fileName
	  var file = item.file // 当前本地上传的这张图片   文件流	 			       
          this.fileList3 =[]
	  // oss上传
          put(filePath, file).then(result => {  // 调oss api 上传图片    	
    	     console.log(result)
    	     // 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
    	     this.fileList3.push({url:result.url}) 
	     this.ruleForm.stempictureurl=result.url;
          })    	       
    },
    beforeRemoves3(file, fileList3){
      this.ruleForm.stempictureurl=""
      this.$refs.ImgRef3.clearFiles()
    },
    // 上传错误提示图片上传
    upLoadMistakehintpictureurl(item){
          console.log(4)
          // 随机命名
          var fileName = item.file.name  // 当前本地上传的这张图片的名称(没有时间日期)	      
          var date = new Date()
	  var filePath = 'anfang-picture/'+new Date().getTime()+'-'+ fileName
	  var file = item.file // 当前本地上传的这张图片   文件流	 			       
          this.fileList4 =[]
	  // oss上传
          put(filePath, file).then(result => {  // 调oss api 上传图片    	
    	     console.log(result)
    	     // 文件上传成功后，获取返回值中的文件名name，并把其放入fileList数组中，表示当前已上传的文件
    	     this.fileList4.push({url:result.url}) 
	     this.ruleForm.mistakehintpictureurl=result.url;
          })    	       
    },
    beforeRemoves4(file, fileList4){
      this.ruleForm.mistakehintpictureurl=""
      this.$refs.ImgRef4.clearFiles()
    },
    
    // 提交
    subimt() {
      this.$refs.formBusiness.validate(async valid => {
	this.ruleForm.choices=this.choicesaa+";"+this.choicesww
	if (!valid) return;
	let {stem,choices,mistakehint,stemvoiceurl,mistakehintvoiceurl,mistakehintpictureurl,stempictureurl}=this.ruleForm
	if(!this.choicesaa) return this.$message.error("请输入选项A内容")
	if(!this.choicesww) return this.$message.error("请输入选项B内容")
	if(!stem) return this.$message.error("请您填写内容")
	if(!choices) return this.$message.error("请输入正确/错误答案")
	if(!mistakehint) return this.$message.error("请输入错误答案提示")
	if(!stemvoiceurl) return this.$message.error("请上传题目真人语音")
	if(!mistakehintvoiceurl) return this.$message.error("请上传错误题目真人语音")
	if(!mistakehintpictureurl) return this.$message.error("请上传错误题目图片")
	if(!stempictureurl) return this.$message.error("请上传题目图片")
	let staffid=JSON.parse(window.sessionStorage.getItem("user")).id
	const res = await saveQuestion({ ...this.ruleForm });
	if(res.code !== 200)return this.$message.error("提交失败")
	this.$message.success("提交成功")
	this.ruleForm.stem=""
	this.ruleForm.choices=""
	this.ruleForm.mistakehint=""
	this.ruleForm.displaying=""
	this.$router.push("/queryQuestion")
      });
    }
  }
};
</script>

<style scoped>
h3 {
  margin-bottom: 30px;
}
h2 {
  margin-bottom: 20px;
}
.subimt {
  width: 200px;
  margin-top: 100px;
  margin: 30px 0 0 120px;
}
</style>